<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title></title>

    <link rel="stylesheet" href="css/iconfont/iconfont.css">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/reset.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/css/connectAccount.css" />

    <style>
        .translateRes{
            margin: 15px 0;
            padding: 15px;
            color: #000;
            background-color: #fff;
        }
        .opencon button {
            width:127px;
            height:36px;
            background:rgba(52,152,219,1);
            border-radius:2px;
        }
        .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open .dropdown-toggle.btn-danger {
            background-color: rgba(52,152,219,1);
            border-color: rgba(52,152,219,1);
        }
        .connectAccount nav {
            display: flex;
            justify-content: flex-end;
        }
        .pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {
            color: #fff;
            background-color: rgba(52,152,219,1);
        }
    </style>
</head>


<body>
    <div class="translateRes">

        <div class="connectAccount">
            <div class="opencon">
                <button class="btn-danger" data-toggle="collapse" data-target="#demo">选择转账联系人</button>
            </div>
            <div id="demo" class="collapse on">
                <div class="connectAccount">
                    <div class="row">
                        <div class="col-xs-12 col-sm-6 col-md-4 account">
                            <div class="box">
                                <div class="user"><span>用户名：</span><span id="username">#E31C1C</span> </div>
                                <div class="user"><span>会员ID：</span><span id="userid">12345</span> </div>
                                <div class="userbtn"><button id="selectTo">选择</button></div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-4 account">
                            <div class="box">
                                <div class="user"><span>用户名：</span><span id="username">#E31C1C</span> </div>
                                <div class="user"><span>会员ID：</span><span id="userid">12345</span> </div>
                                <div class="userbtn"><button id="selectTo">选择</button></div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-4 account">
                            <div class="box">
                                <div class="user"><span>用户名：</span><span id="username">#E31C1C</span> </div>
                                <div class="user"><span>会员ID：</span><span id="userid">12345</span> </div>
                                <div class="userbtn"><button id="selectTo">选择</button></div>
                            </div>
                        </div>
                    </div>
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <li>
                                <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li>
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
            <div class="mes mesinp2">
                <div class="usermes">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">转入用户名</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control usernameval" id="inputEmail3" placeholder="请输入用户名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">转入会员ID</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control useridval" id="inputEmail3" placeholder="请输入会员ID">
                                <div style="display: flex;align-items: center;line-height: 34px;"><input type="checkbox">设为常用联系人</div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">转账方式</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="请输入转账方式">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">转出金额</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="请输入金额">
                                <div style="line-height: 30px; color: #E31C1C;">注册积分可转出余额：$500.00</div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">安全密码</label>
                            <div class="col-sm-8">
                                <input type="password" class="form-control" id="inputEmail3" placeholder="请输入安全密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">验证码</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="inputPassword3" placeholder="请输入验证码">
                            </div>
                            <div class="col-sm-2 col-xs-5  img">
                                <img src="img/image/bgtop.png" alt="">
                            </div>
                        </div>
                    </form>
                    <div class="btnsure"><button id="sureTo2">确认</button></div>
                </div>
            </div>
        </div>
    </div>

    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
    <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="js/plugins/layer/layer.min.js"></script>

    <!-- 自定义js -->
    <script src="js/hplus.js?v=4.1.0"></script>
    <script type="text/javascript" src="js/contabs.js"></script>
    <script>
        $(document).ready(function () {
            $("#selectTo").click(function () {
                var username = document.getElementById("username").innerText;
                var userid = document.getElementById("userid").innerText;
                var usernameval = document.getElementById("usernameval");
                var useridval = document.getElementById("useridval");
                $('.usernameval').val(username);
                $('.useridval').val(userid);
            });
        });
    </script>
</body>

</html>